<template>
    <div>
        <div style="background-color: #fff;position: fixed;top: 0;width: 100%;z-index: 10000;">
            <div style="padding:10px 0px;margin-left:-32px;position: relative;">
                <img @click="returnBcak" style="width: 10px;top:10px;left:16px;position: fixed;" src="../assets/img/common-icon-ArrowLeftBlack.svg" alt="">
                <span style="margin-left:50%;color: #333;font-size: 16px;font-weight: bold;">资讯</span>
            </div>
        </div>
        <!-- <ul class="elementSty" style="white-space: nowrap;overflow-x: scroll;padding:20px 10px;margin-top:40px;">
            <li style="display: inline-block;text-align: center;color:#333;font-size: 16px;margin-right: 20px;"
                v-for="(val,index) in indexList" @click="jumpClass(index,val)">
                <div>
                <div :style="classIndex == index?'opacity: 1;color:#FF2E67;':'opacity: .6'">{{val.nickName}}</div>
                <div v-if="classIndex == index && val.nickName.length==2" style="border:1px solid #FF2E67;width:30px;margin-top:5px;"></div>
                <div v-if="classIndex == index && val.nickName.length==4" style="border:1px solid #FF2E67;width:60px;margin-top:5px;"></div>
                </div>
            </li>
        </ul> -->
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul class="information-ul">
                <li v-for="(val,index) in indexList" @click="detailCli(val)">
                    <div>
                        <div class="titleCal">{{val.title}}</div>
                        <!-- <div class="img-list" v-if="val.imageurls.length > 3">
                            <img class="img" v-for="item in 3" :key="item" :src="val.imageurls[item]">
                        </div>
                        <div v-else>
                            <div class="img-one" v-if="val.img || val.imageurls[0]">
                                <img class="img" :src="val.img||val.imageurls[0]">
                            </div>
                        </div> -->
                        <div>
                            <div class="img-one" v-if="val.thumbnailPicS && !val.thumbnailPicS02 && !val.thumbnailPicS03">
                                <img class="img" :src="val.thumbnailPicS">
                            </div>
                            <div class="img-one" v-if="val.thumbnailPicS && val.thumbnailPicS02 && !val.thumbnailPicS03">
                                <img class="img" style="width:48%;margin-right: 2%;height: 147px;" :src="val.thumbnailPicS">
                                <img class="img" style="width:48%;height: 147px;float: right;" :src="val.thumbnailPicS02">
                            </div>
                            <div class="img-one" style="display: flex;justify-content: space-between;" v-if="val.thumbnailPicS && val.thumbnailPicS02 && val.thumbnailPicS03">
                                <div style="width: 31%;margin-right: 2%;">
                                    <img class="img" style="height: 103px;" :src="val.thumbnailPicS">
                                </div>
                                <div style="width: 31%;margin-right: 2%;">
                                    <img class="img" style="height: 103px;" :src="val.thumbnailPicS02">
                                </div>
                                <div style="width: 31%;">
                                    <img class="img" style="height: 103px;" :src="val.thumbnailPicS03">
                                </div>
                            </div>
                        </div>
                        <div style="margin-bottom:15px;font-size:12px;color:#888;">
                            <span>{{val.authorName}}</span>
                            <span style="float: right;">{{val.date}}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </van-list>
        <div class="information-detail" v-show="!showList">
            <!-- <title class="title">{{title}}</title>
            <div v-html="htmlVal" :class="htmlVal?'information-html':''"></div> -->
            <iframe style="width:100%;min-height:calc(100vh - 56px);position: absolute;" :src="urlZi" frameborder="0"></iframe>
            <div v-if="completeState == 0">
                <div style="position: absolute;right: 16px;top:6px;width: 50px;height: 50px;border-radius: 26px;background-color: rgba(0,0,0,.4);padding:1px 1px;">
                </div>
                <van-circle style="position: absolute;right: 15px;top:5px;" v-model="currentRate" :rate="0" :speed="100" :stroke-width="70" layer-color="#fff" :color="gradientColor" :size="52" />
            </div>
        </div>
        <home-index></home-index>
    </div>
</template>

<script>
    import homeIndex from "./homeIndex"
    import {
        List,Circle,Toast
    } from 'vant';
    export default {
        name: "informationPage",
        data() {
            return {
                dataList: [],
                showList: true,
                title: "",
                htmlVal: "",
                loading: false,
                finished: false,
                num: 0,
                total: 0,
                setTimeIn: null,
                userId: '',
                classIndex: 0,
                indexList: [],
                channelId: "9a15d3d4b5cab17f34e6d7976b1b1f30",
                urlZi:'',
                gradientColor: {
                    '0%': '#FF5AA0',
                    '100%': '#FF2E67',
                },
                currentRate:0,
                interNum:'',
                completeState:-1
            }
        },
        components: {
            homeIndex,
            [List.name]: List,
            [Circle.name]: Circle
        },
        mounted() {
            this.userId = localStorage.getItem('user_id');
            this.$store.dispatch('updataActive', 1);
            this.getLoginUserAllTasks();
            // this.initData();
        },
        destroyed() {
            if (this.setTimeIn) { //如果定时器在运行则关闭
                clearTimeout(this.setTimeIn);
            }
        },
        methods: {
            //获取用户的所有任务             
            getLoginUserAllTasks() {
                this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/getLoginUserAllTasks?user_id=" + this.userId, { user_id: this.userId }).then((data) => {
                    if (data.data.success) {
                        var taskList = data.data.result.taskList;
                        for(let i=0;i<taskList.length;i++){
                            if(taskList[i].taskName == '看资讯'){
                                this.completeState = taskList[i].completeState;
                            }
                        }
                    }
                })
            },
            initData() {
                var that = this;
                that.$http.get(that.utils.config + "/netmall/app/taobao/api/getNewsData_2").then((data) => {
                    if (data.data.success) {
                        var listObj = JSON.parse(data.data.message);
                        that.indexList = listObj.result.data;
                    }
                })                
            },
            jumpClass(num, val) {
                this.classIndex = num;
                this.num = 0;
                this.channelId = val.channelId;
                this.dataList = [];
                this.onLoad();
            },
            returnBcak() {
                if (this.showList) {
                    this.$router.go(-1);
                    clearInterval(this.interNum);
                    this.currentRate = 0;
                } else {
                    window.noBack = false;
                    this.showList = true;
                    clearInterval(this.interNum);
                }
            },
            detailCli(val) {
                window.noBack = this.returnBcak.bind(this);
                this.interNum = setInterval(()=>{
                    this.currentRate=this.currentRate+1;
                    if(this.currentRate >= 100){
                        clearInterval(this.interNum);
                        Toast('每日任务完成');
                    }
                },600);
                this.showList = false;
                // window.scrollTo(0, 0);
                this.htmlVal = val.html;
                this.urlZi = val.url;
                this.title = val.title;
                if (this.userId) {
                    this.setTimeIn = setTimeout(() => {
                        this.$http.get(this.utils.config + "/netmall/app/person/api/everyDayTask?user_id=" + this.userId + "&taskName=看资讯&minute=1").then((data) => {})
                    }, 60000)
                }
            },
            onLoad() {
                var that = this;
                that.num++;
                that.$http.get(this.utils.config + "/netmall/app/taobao/api/getNewsData_2?pageNo=" + that.num + "&pageSize=10").then((data) => {
                    this.total = data.data.result.total;
                    // data.data.result.records.forEach(elem => {
                    //     elem.imageurls = JSON.parse(elem.imageurls).map(ele => ele.url);
                    //     that.dataList.push(elem);
                    // });
                    for(let i=0;i<data.data.result.records.length;i++){
                        that.indexList.push(data.data.result.records[i]);
                        this.loading = false;
                    }
                    if (that.total == data.data.result.total.length) {
                        that.finished = true;
                    }
                })
            },
        }

    }
</script>

<style scoped>
    .img-list {
        display: flex;
        padding: 10px 0;
        width: 100%;
        justify-content: space-around;
    }

    .img-list .img {
        width: 31%;
        height: 100px;
        object-fit: cover;

    }

    .img-one .img {
        padding: 10px 0;
        height: 200px;
        width: 100%;
        object-fit: cover;
    }

    .information-ul {
        margin-top: 41px;
        text-align: left;
        padding: 0 10px;
    }

    .information-ul li {
        padding-top: 10px;
    }

    .titleCal {
        font-size: 15px;
        font-weight: bold;
    }

    .information-detail {
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
        margin-top: 38px;
        /* padding: 1px 10px; */
        padding-bottom: 60px;
        overflow-y: scroll;
        height: 100vh;
        position: fixed;
        background-color: #fff;
        top: 0;
    }

    .information-detail .title {
        margin: 20px 0;
        text-align: justify;
        font-size: 16px;
        line-height: 27px;
        font-weight: bold;
        display: block;
    }

    .information-html {
        padding-bottom: 30px;
    }

    .information-html>>>p {
        margin: 5px 0;
        text-align: justify;
        font-size: 16px;
        line-height: 27px;
         text-indent: 32px;
    }

    .information-html>>>p>img {
        display: block;
        width: 100% !important;
    }

    .elementSty::-webkit-scrollbar {
        display: none
    }
</style>